<template>
  <div>
    <div class="recommend-title">
      <span class="iconfont icon-heat">&#xe85c;</span> 猜你喜欢
    </div>
    <ul>
      <router-link tag="li"
                   to="/aa"
                   v-for="(item) in recommendList"
                   :key="item.id"
                   class="list-item">
        <div class="item-img">
          <img :src="item.imgUrl"
               alt="">
        </div>
        <div class="item-img-tag">
          {{item.tag}}
        </div>
        <div class="item-info">
          <div class="inner-box">
            <div class="info-title">{{item.title}}</div>
            <div class="info-comment">
              <span class="iconfont icon-star">&#xe61a;</span>
              <span class="iconfont icon-star">&#xe61a;</span>
              <span class="iconfont icon-star">&#xe61a;</span>
              <span class="iconfont icon-star">&#xe61a;</span>
              <span class="comment-num">{{item.commentNum}}评论</span>
            </div>
            <div class="info-price">
              <span class="price">￥<em>{{item.price}}</em></span>起
              <span class="district">{{item.district}}</span>
            </div>
          </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recommendList: [
        {
          id: '001',
          imgUrl: '//imgs.qunarzz.com/p/p70/1809/e7/4941057a6aae702.jpg_256x160_9fee6ccb.jpg',
          tag: '可定今日',
          title: '橘子洲',
          commentNum: '123',
          price: '128',
          district: '晋安区'
        },
        {
          id: '002',
          imgUrl: '//imgs.qunarzz.com/p/p70/1809/e7/4941057a6aae702.jpg_256x160_9fee6ccb.jpg',
          tag: '可定今日',
          title: '橘子洲',
          commentNum: '123',
          price: '128',
          district: '晋安区'
        },
        {
          id: '003',
          imgUrl: '//imgs.qunarzz.com/p/p70/1809/e7/4941057a6aae702.jpg_256x160_9fee6ccb.jpg',
          tag: '可定今日',
          title: '橘子洲',
          commentNum: '123',
          price: '128',
          district: '晋安区'
        },
        {
          id: '004',
          imgUrl: '//imgs.qunarzz.com/p/p70/1809/e7/4941057a6aae702.jpg_256x160_9fee6ccb.jpg',
          tag: '可定今日',
          title: '橘子洲',
          commentNum: '123',
          price: '128',
          district: '晋安区'
        },
        {
          id: '005',
          imgUrl: '//imgs.qunarzz.com/p/p70/1809/e7/4941057a6aae702.jpg_256x160_9fee6ccb.jpg',
          tag: '可定今日',
          title: '橘子洲',
          commentNum: '123',
          price: '128',
          district: '晋安区'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl';
@import '~@/assets/styles/mixins.styl';

div {
  box-sizing: border-box;
}

.recommend-title {
  padding: 0 0.2rem;
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.32rem;
  background-color: #eee;

  .icon-heat {
    color: #ff4040;
  }
}

.list-item {
  display: flex;
  position: relative;
  width: 100%;
  height: 2.4rem;

  .item-img {
    width: 2.4rem;
    height: 2.4rem;
    // background-color: green;
    padding: 0.2rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .item-img-tag {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.02rem;
    height: 0.38rem;
    line-height: 0.38rem;
    background-color: pink;
    background-image: url('//img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png');
    background-size: 100% 100%;
    border-bottom-right-radius: 10px;
    font-size: 0.2rem;
    color: #fff;
    text-indent: 0.04rem;
  }

  .item-info {
    flex: 1;
    padding: 0.4rem 0.1rem;
    min-width: 0; // 解决flex 带来不能出现省略号的问题

    // background-color: red;
    .inner-box {
      width: 100%;
      height: 100%;

      // background-color: brown;
      .info-title {
        width: 100%;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.32rem;
        ellipsis();
      }

      .info-comment {
        width: 100%;
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.24rem;

        .icon-star {
          font-size: 0.2rem;
          color: #ffb436;
        }

        .comment-num {
          color: $lightTxtColor;
        }
      }

      .info-price {
        position: relative;
        width: 100%;
        height: 0.6rem;
        line-height: 0.6rem;
        color: $lightTxtColor;
      }

      .price {
        color: #ff8300;

        em {
          font-size: 0.4rem;
        }
      }

      .district {
        position: absolute;
        right: 0.24rem;
        font-size: 0.24rem;
      }
    }
  }
}
</style>
